<template>
	<view class="mygw">
		<u-navbar bgColor="#fff">
			<view slot="left" class="align-center">
				<image @click="$tools.back()" src="@/static/login/back3.png" style="width: 36rpx; height: 36rpx"></image>
			</view>
			<view slot="center">
				<view style="font-weight: 600; font-size: 36rpx; color: #333333">岗位报名</view>
			</view>
		</u-navbar>
		<view class="flex-around" style="padding: 36rpx 0">
			<view
				class="text2"
				:class="{ text1: current == 0 }"
				@click="
					current = 0;
					init();
				"
			>
				全部
			</view>
			<view
				class="text2"
				:class="{ text1: current == 1 }"
				@click="
					current = 1;
					init();
				"
			>
				已报名
			</view>
			<view
				class="text2"
				:class="{ text1: current == 2 }"
				@click="
					current = 2;
					init();
				"
			>
				合适
			</view>
			<view
				class="text2"
				:class="{ text1: current == 3 }"
				@click="
					current = 3;
					init();
				"
			>
				不合适
			</view>
			<view
				class="text2"
				:class="{ text1: current == 4 }"
				@click="
					current = 4;
					init();
				"
			>
				已取消
			</view>
		</view>
		<view style="padding: 20rpx 32rpx; background-color: #f5f6fa; min-height: 100vh">
			<view @click="$tools.navigite('/pages/index/detail', item.postId)" class="card" v-for="(item, index) in list" :key="index" style="margin-bottom: 20rpx">
				<view class="flex-between1" style="margin-bottom: 12rpx">
					<view class="flex">
						<text style="font-weight: 600; font-size: 32rpx; color: #333333; margin-right: 20rpx">{{ item.postInfo.jobName }}</text>
						<view
							v-if="item.status == 0"
							class="flex-center1"
							style="font-size: 24rpx; color: #63c802; background: rgba(99, 200, 2, 0.1); border-radius: 8rpx; border: 2rpx solid #63c802; padding: 5rpx 16rpx"
						>
							已报名
						</view>
						<view
							v-if="item.status == 1"
							class="flex-center1"
							style="font-size: 24rpx; color: #63c802; background: rgba(99, 200, 2, 0.1); border-radius: 8rpx; border: 2rpx solid #63c802; padding: 5rpx 16rpx"
						>
							合适
						</view>
						<view
							v-if="item.status == 2"
							class="flex-center1"
							style="font-size: 24rpx; color: #fe4343; background: rgba(254, 67, 67, 0.1); border-radius: 8rpx; border: 1rpx solid #fe4343; padding: 5rpx 16rpx"
						>
							不合适
						</view>
						<view
							v-if="item.status == 3"
							class="flex-center1"
							style="font-size: 24rpx; color: #999999; background: rgba(153, 153, 153, 0.1); border-radius: 8rpx; border: 1rpx solid #999999; padding: 5rpx 16rpx"
						>
							已取消
						</view>
					</view>
					<view class="">
						<text style="font-weight: Bold; font-size: 32rpx; color: #fe4343">{{ item.postInfo.salaryStart }}-{{ item.postInfo.salaryEnd }}</text>
						<text style="font-weight: 400; font-size: 24rpx; color: #fe4343">元/月</text>
					</view>
				</view>
				<view style="font-weight: 400; font-size: 28rpx; color: #333333; margin-bottom: 20rpx">
					{{ item.postInfo.jobTime }}，
					<text v-if="item.postInfo.workType == 1">长期</text>
					<text v-if="item.postInfo.workType == 2">临时</text>
					<text v-if="item.postInfo.workType == 3">小时</text>
					<text v-if="item.postInfo.workType == 4">计件</text>
					<text v-if="item.postInfo.workType == 5">其他</text>
				</view>
				<view class="flex">
					<view style="padding: 8rpx 20rpx; background: #f8f8f8; font-weight: 400; font-size: 24rpx; color: #666666">{{ item.postInfo.label }}</view>
				</view>
				<view class="flex-between1 align-end">
					<view style="font-weight: 400; font-size: 24rpx; color: #999999">{{ item.postInfo.companyName }}</view>
					<view
						v-if="item.status == 0"
						@click="cancel(item.id)"
						class="flex-center1"
						style="width: 192rpx; height: 64rpx; background: #1365f9; border-radius: 32rpx; font-size: 28rpx; color: #ffffff"
					>
						取消报名
					</view>
				</view>
			</view>
			<view v-if="!list.length">
				<view class="flex-center1" style="margin-bottom: 80rpx">
					<image src="@/static/mine/gwbm.png" style="width: 400rpx; height: 346rpx"></image>
				</view>
				<view style="text-align: center; font-weight: 600; font-size: 36rpx; color: #333333; margin-bottom: 12rpx">暂无报名</view>
				<view style="text-align: center; font-weight: 400; font-size: 28rpx; color: #999999">您没有报名任何岗位</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			current: 0,
			list: [],
			pageNum: 1,
			pageSize: 20,
			isLastPage: false
		};
	},
	onShow() {
		this.init();
	},
	onReachBottom() {
		if (this.isLastPage) return;
		this.pageNum++;
		this.getgw();
	},
	methods: {
		init() {
			this.list = [];
			this.getgw();
		},
		getgw() {
			this.$request('front/user/postSignList', {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				status: this.current - 1
			}).then((res) => {
				// res.obj.list.map((item, index) => {
				// 	item.feature = item.feature.split(',');
				// });
				this.list = [...this.list, ...res.obj.list];
				console.log(res.obj.list, '岗位');
				this.isLastPage = res.obj.isLastPage;
			});
		},
		cancel(id) {
			this.$request('front/user/cancelPostSign', {
				id
			}).then((res) => {
				// res.obj.list.map((item, index) => {
				// 	item.feature = item.feature.split(',');
				// });
				this.$tools.toast('操作成功');
				setTimeout(() => {
					this.init();
				}, 1000);
			});
		}
	}
};
</script>

<style lang="less" scoped>
.mygw {
	padding-top: 180rpx;
	.text2 {
		font-weight: 400;
		font-size: 32rpx;
		color: #999999;
	}
	.text1 {
		font-weight: 600;
		font-size: 32rpx;
		color: #1365f9;
	}
	.card {
		padding: 34rpx 40rpx;
		background: #ffffff;
	}
}
</style>
